<clr-modal [(clrModalOpen)]="opened" [clrModalClosable]="false">
    <h3 class="modal-title">{{'APP_ADD_BACKUP_ACCOUNT'|translate}}</h3>

    <div class="modal-body modal-height">
        <form clrForm #backupAccountForm="ngForm">
            <clr-input-container>
                <label>{{'APP_NAME'|translate}}</label>
                <input clrInput size=45 maxlength="15" type="text" [(ngModel)]="item.name"
                       name="name" required>
            </clr-input-container>
            <clr-select-container>
                <label>{{'APP_TYPE'|translate}}:</label>
                <select clrSelect name="type" [(ngModel)]="item.type" (ngModelChange)="changeType()" required>
                    <option value="OSS">oss</option>
                    <option value="S3">s3</option>
                    <option value="AZURE">azure</option>
                </select>
            </clr-select-container>
            <div *ngIf="item.type=='OSS' || item.type=='S3'">
                <clr-input-container>
                    <label>AccessKey</label>
                    <input clrInput size=45 type="text" [(ngModel)]="item.credentialVars['accessKey']" name="accessKey"
                           required>
                </clr-input-container>
                <clr-password-container>
                    <label>SecretKey</label>
                    <input clrPassword size=45 type="password" [(ngModel)]="item.credentialVars['secretKey']"
                           name="secretKey" required>
                </clr-password-container>
                <div *ngIf="item.type=='S3'">
                    <clr-input-container>
                        <label>{{'APP_REGION'|translate}}</label>
                        <input clrInput size=45 type="text" [(ngModel)]="item.credentialVars['region']" name="region"
                               required>
                    </clr-input-container>
                </div>
            </div>
            <div *ngIf="item.type=='AZURE'">
                <clr-input-container>
                    <label>{{'APP_BACKUP_ACCOUNT_NAME'|translate}}</label>
                    <input clrInput size=45 type="text" [(ngModel)]="item.credentialVars['accountName']"
                           name="accountName"
                           required>
                </clr-input-container>
                <clr-password-container>
                    <label>{{'APP_BACKUP_ACCOUNT_KEY'|translate}}</label>
                    <input clrPassword size=45 type="password" [(ngModel)]="item.credentialVars['accountKey']"
                           name="accountKey"
                           required>
                </clr-password-container>
            </div>
            <clr-input-container>
                <label>{{'APP_ENDPOINT'|translate}}</label>
                <input clrInput size=45 type="text" [(ngModel)]="item.credentialVars['endpoint']" name="endpoint"
                       required>
                <clr-control-helper *ngIf="item.type=='S3'">
                    S3: http://s3.REGION_NAME.amazonaws.com.cn
                </clr-control-helper>
                <clr-control-helper *ngIf="item.type=='S3'">
                    {{'APP_EXAMPLE'|translate}}: http://s3.cn-north-1.amazonaws.com.cn
                </clr-control-helper>
                <clr-control-helper *ngIf="item.type=='OSS'">
                    OSS: http://REGION_NAME.aliyuncs.com
                </clr-control-helper>
                <clr-control-helper *ngIf="item.type=='OSS'">
                    {{'APP_EXAMPLE'|translate}}:http://oss-cn-hangzhou.aliyuncs.com
                </clr-control-helper>
                <clr-control-helper *ngIf="item.type=='AZURE'">China: blob.core.chinacloudapi.cn</clr-control-helper>
                <clr-control-helper *ngIf="item.type=='AZURE'">International: blob.core.windows.net</clr-control-helper>
            </clr-input-container>
            <clr-select-container>
                <label>{{'APP_BUCKET'|translate}}</label>
                <select clrSelect name="bucket" [(ngModel)]="item.bucket" required>
                    <option *ngFor="let bucket of buckets" value="{{bucket}}">{{bucket}}</option>
                </select>
            </clr-select-container>
            <app-modal-alert></app-modal-alert>
        </form>
        <div class="modal-footer">
            <button type="button" class="btn btn-success-outline" (click)="getBuckets()"
                    [disabled]="isSubmitGoing">
                {{'APP_GET_BUCKET'|translate}}
            </button>
            <button type="button" class="btn btn-outline" (click)="onCancel()"
                    [disabled]="isSubmitGoing">{{'APP_CANCEL'|translate}}</button>
            <button type="submit" class="btn btn-primary" (click)="onSubmit()"
                    [disabled]="backupAccountForm.invalid">{{'APP_COMMIT'|translate}}
            </button>
        </div>
    </div>
</clr-modal>
